<template>
    <div>
        <ul>
            <router-link to="/film" tag="li" active-class="orange"><i class="iconfont icondianying"></i><span>电影</span></router-link>
            <router-link to="/cinema" tag="li" active-class="orange"><i class="iconfont iconyingyuan"></i><span>影院</span></router-link>
            <router-link to="/center" tag="li" active-class="orange"><i class="iconfont iconwodedangxuan"></i><span>我的</span></router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "navbar"
    }
</script>

<style scoped>
        ul{display: flex;height: 50px;width: 100%;background: white;justify-content: space-around;position: fixed;bottom: 0px;list-style: none;z-index: 99;}
        ul>li{flex-grow: 1;text-align: center;cursor: pointer;display: flex;flex-direction: column;justify-content: space-around;}
        li>i{font-size: 25px;color: inherit;}
        li>span{font-size: 20px;color: inherit;}
        .orange{color: orange;}
</style>